<template>
	<view class="container">
		<!-- 用户信息区域 -->
		<view class="user-info-section">
			<view class="user-header">
				<view class="avatar-container">
					<image class="avatar" src="/static/logo.png" mode="aspectFill"></image>
				</view>
				<view class="user-details">
					<text class="username">{{ userInfo.username || '未设置' }}</text>
					<view class="user-id" v-if="userInfo.id">ID: {{ userInfo.id }}</view>
					<view class="stars">
						<text class="star" v-for="item in 5" :key="item" :class="{ 'filled': item <= userRating }">★</text>
						<text class="rating-text">{{ userRating }}分</text>
					</view>
				</view>
			</view>
			
			<view class="user-stats">
				<view class="stat-item">
					<text class="stat-value">{{ completedOrders }}</text>
					<text class="stat-label">完成工单</text>
				</view>
				<view class="stat-item">
					<text class="stat-value">{{ successRate }}%</text>
					<text class="stat-label">完成率</text>
				</view>
				<view class="stat-item">
					<text class="stat-value">{{ userLevel }}</text>
					<text class="stat-label">等级</text>
				</view>
			</view>
		</view>
		
		<!-- 详细信息区域 -->
		<view class="detail-section">
			<view class="section-title">基本信息</view>
			<view class="detail-item">
				<text class="detail-label">姓名:</text>
				<text class="detail-value">{{ userInfo.name || userInfo.username || '未设置' }}</text>
			</view>
			<view class="detail-item">
				<text class="detail-label">手机号:</text>
				<text class="detail-value">{{ userInfo.phone || '未绑定' }}</text>
			</view>
			<view class="detail-item">
				<text class="detail-label">邮箱:</text>
				<text class="detail-value">{{ userInfo.email || '未设置' }}</text>
			</view>
			<view class="detail-item">
				<text class="detail-label">注册时间:</text>
				<text class="detail-value">{{ userInfo.registerTime || '未知' }}</text>
			</view>
		</view>
		
		<!-- 工作信息 -->
		<view class="detail-section">
			<view class="section-title">工作信息</view>
			<view class="detail-item">
				<text class="detail-label">当前状态:</text>
				<text class="detail-value" :class="{'status-working': isWorking, 'status-rest': !isWorking}">{{ isWorking ? '接单中' : '休息中' }}</text>
			</view>
			<view class="detail-item">
				<text class="detail-label">接单总数:</text>
				<text class="detail-value">{{ totalOrders }}</text>
			</view>
			<view class="detail-item">
				<text class="detail-label">本月接单:</text>
				<text class="detail-value">{{ monthlyOrders }}</text>
			</view>
			<view class="detail-item">
				<text class="detail-label">服务区域:</text>
				<text class="detail-value">{{ serviceArea || '未设置' }}</text>
			</view>
		</view>
		
		<!-- 提成信息 -->
		<view class="detail-section">
			<view class="section-title">提成信息</view>
			<view class="detail-item">
				<text class="detail-label">账户余额:</text>
				<text class="detail-value balance">¥{{ accountBalance }}</text>
			</view>
			<view class="detail-item">
				<text class="detail-label">今日提成:</text>
				<text class="detail-value">¥{{ todayCommission }}</text>
			</view>
			<view class="detail-item">
				<text class="detail-label">本月提成:</text>
				<text class="detail-value">¥{{ monthlyCommission }}</text>
			</view>
			<view class="detail-item">
				<text class="detail-label">总提成:</text>
				<text class="detail-value">¥{{ totalCommission }}</text>
			</view>
		</view>
		
		<!-- 退出登录按钮 -->
		<view class="actions-section">
			<button class="action-button logout-button" @click="logout">退出登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isWorking: true,
				userRating: 4.8,
				completedOrders: 128,
				successRate: 98.5,
				userLevel: 'LV3',
				totalOrders: 156,
				monthlyOrders: 24,
				accountBalance: 1286.5,
				todayCommission: 86.5,
				monthlyCommission: 1286.5,
				totalCommission: 5680.0,
				serviceArea: '北京市朝阳区',
				userInfo: {
					username: '',
					id: '',
					name: '',
					phone: '138****8888',
					email: 'zhangsan@example.com',
					registerTime: '2023-01-15'
				}
			}
		},
		onLoad() {
			// 页面加载时从本地存储获取用户信息
			this.loadUserInfo();
		},
		methods: {
			loadUserInfo() {
				try {
					// 从本地存储获取用户信息
					const userInfo = uni.getStorageSync('userInfo');
					if (userInfo) {
						this.userInfo = {
							...this.userInfo,
							...userInfo
						};
					}
					
					// 获取用户名作为默认显示
					if (!this.userInfo.username && userInfo && userInfo.username) {
						this.userInfo.username = userInfo.username;
					}
				} catch (error) {
					console.error('获取用户信息失败:', error);
					uni.showToast({
						title: '获取用户信息失败',
						icon: 'none'
					});
				}
			},
			
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除本地存储的用户信息
							uni.removeStorageSync('userInfo');
							uni.removeStorageSync('token');
							
							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							});
							
							// 延迟跳转到登录页面
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/home/home'
								});
							}, 1000);
						}
					}
				});
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
		padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
		min-height: 100vh;
		background-color: #f5f5f5;
		box-sizing: border-box;
	}
	
	.user-info-section {
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.user-header {
		display: flex;
		align-items: center;
		padding: 40rpx 30rpx 20rpx;
	}
	
	.avatar-container {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 30rpx;
	}
	
	.avatar {
		width: 100%;
		height: 100%;
	}
	
	.user-details {
		flex: 1;
	}
	
	.username {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.user-id {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 15rpx;
	}
	
	.stars {
		display: flex;
		align-items: center;
	}
	
	.star {
		font-size: 30rpx;
		color: #ddd;
	}
	
	.star.filled {
		color: #ffcc00;
	}
	
	.rating-text {
		font-size: 26rpx;
		color: #666;
		margin-left: 10rpx;
	}
	
	.user-stats {
		display: flex;
		border-top: 1rpx solid #eee;
	}
	
	.stat-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
	}
	
	.stat-value {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 5rpx;
	}
	
	.stat-label {
		font-size: 24rpx;
		color: #666;
	}
	
	.detail-section {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.detail-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}
	
	.detail-item:last-child {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}
	
	.detail-label {
		font-size: 28rpx;
		color: #666;
	}
	
	.detail-value {
		font-size: 28rpx;
		color: #333;
	}
	
	.detail-value.balance {
		color: #ff4d4f;
		font-weight: bold;
	}
	
	.status-working {
		color: #007AFF;
	}
	
	.status-rest {
		color: #999;
	}
	
	.actions-section {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.action-button {
		background-color: #fff;
		border: 1rpx solid #007AFF;
		color: #007AFF;
		font-size: 30rpx;
		padding: 20rpx;
		border-radius: 10rpx;
	}
	
	.logout-button {
		background-color: #ff4d4f;
		border: 1rpx solid #ff4d4f;
		color: #fff;
	}
</style>